<template>
  <div class="navbar">
    <div class="logo-container">
      <div class="logo-icon">
        <el-icon><Platform /></el-icon>
      </div>
      <div class="logo-text">VueElectron</div>
    </div>

    <div class="nav-menu">
      <router-link
          v-for="(item, index) in menuItems"
          :key="index"
          :to="item.path"
          custom
          v-slot="{ navigate, isActive }"
      >
        <div
            class="nav-item"
            :class="{ active: isActive }"
            @click="navigate"
        >
          <el-icon><component :is="item.icon" /></el-icon>
          <span>{{ item.label }}</span>
        </div>
      </router-link>
    </div>

    <div class="user-section">
      <div class="user-info">
        <div class="user-name">{{ userInfo.name }}</div>
        <div class="user-role">{{ userInfo.role }}</div>
      </div>
      <div class="user-avatar">{{ userInfo.avatar }}</div>
      <el-button class="logout-btn" type="danger" size="small" @click="logout">
        <el-icon><SwitchButton /></el-icon> 退出
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  Platform, HomeFilled, User, DataAnalysis, Setting, SwitchButton
} from '@element-plus/icons-vue'
import {useRouter} from 'vue-router'
import {useAuthStore} from '../stores/auth'
import {ElMessage} from 'element-plus'


const router = useRouter()
const authStore = useAuthStore();
const userInfo = authStore.accountInfo();
const logout =async () => {
  authStore.logout();
  ElMessage.success('您已安全退出系统')
  router.push('/login');
};
const  menuItems= [
  { name: 'dashboard', label: '首页', icon: 'HomeFilled', path: '/main' },
  { name: 'data', label: '数据分析', icon: 'DataAnalysis', path: '/data' },
  { name: 'system', label: '系统设置', icon: 'Setting', path: '/settings' }
]
</script>

<style scoped>
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 60px;
  background: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  z-index: 10;
  position: relative;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  border-radius: 8px;
  color: white;
  font-size: 20px;
}

.logo-text {
  font-size: 18px;
  font-weight: 700;
  color: #2c3e50;
}

.nav-menu {
  display: flex;
  gap: 8px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #5a5e66;
}

.nav-item:hover {
  background: #f5f7fa;
  color: #409eff;
}

.nav-item.active {
  background: #ecf5ff;
  color: #409eff;
}

.nav-item .el-icon {
  font-size: 18px;
}

.user-section {
  display: flex;
  align-items: center;
  gap: 16px;
}

.user-info {
  text-align: right;
}

.user-name {
  font-weight: 600;
  font-size: 14px;
}

.user-role {
  font-size: 12px;
  color: #909399;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.logout-btn {
  margin-left: 10px;
}
</style>